<template>
  <div class="card-container">
    <el-form ref="projectInfoRef" :model="form" :rules="rules" label-width="auto" style="margin-top: 15px" :disabled="route.query.type === 'look'">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="项目编码" prop="projectCode">
            <el-input v-model="form.projectCode" placeholder="请输入项目编码" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="form.projectName" placeholder="请输入项目名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目类别" prop="projectType">
            <el-select v-model="form.projectType" placeholder="请选择项目类别">
              <el-option
                  v-for="dict in project_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请单位" prop="applicationUnitName">
            <el-input v-model="form.applicationUnitName" placeholder="请输入申请单位" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目负责人" prop="projectLeaderName">
            <el-input v-model="form.projectLeaderName" placeholder="请输入项目负责人"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目负责人电话" prop="leaderPhone">
            <el-input v-model="form.leaderPhone" placeholder="请输入项目负责人电话"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目联系人" prop="personContactName">
            <el-input v-model="form.personContactName" placeholder="请输入项目联系人"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目联系人电话" prop="contactPhone">
            <el-input v-model="form.contactPhone" placeholder="请输入项目联系人电话"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="推荐单位" prop="recommendationUnitName">
            <el-input v-model="form.recommendationUnitName" placeholder="请输入推荐单位" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否揭榜挂帅">
            <el-select v-model="form.unveilTheLeader" placeholder="请选择是否揭榜挂帅">
              <el-option
                  v-for="dict in yes_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="display: flex; justify-content: flex-end" v-if="route.query.type !== 'look'">
          <el-form-item>
            <el-button type="primary" @click="onSubmit(0)">保存草稿</el-button>
            <el-button type="primary" @click="onSubmit(1)">下一步</el-button>
            <el-button @click="onCancel">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import {getCode, addProject, getProject} from '@/api/departmentWaterResources/project.js'
import {useRoute} from "vue-router";
import useProjectStore from '@/store/modules/project.js'
import useUserStore from '@/store/modules/user.js'

const route = useRoute();
const projectStore = useProjectStore();
const userStore = useUserStore();
const projectInfoRef = ref()
const emit = defineEmits(['activeNext'])
const {proxy} = getCurrentInstance();
const {project_type, project_app_process_state, yes_no} = proxy.useDict('project_type', 'project_app_process_state', 'yes_no');

const data = reactive({
  form: {
    recommendationUnitId: '208',
    applicationUnitId: '208'
  },
  rules: {
    projectCode: [{required: true, message: '请输入项目编码', trigger: 'blur'}],
    projectName: [{required: true, message: '请输入项目名称', trigger: 'blur'}],
    projectType: [{required: true, message: '请选择项目类别', trigger: 'change'}],
    applicationUnitName: [{required: true, message: '请输入申请单位', trigger: 'blur'}],
    projectLeaderName: [{required: true, message: '请输入项目负责人', trigger: 'blur'}],
    leaderPhone: [{required: true, message: '请输入项目负责人电话', trigger: 'blur'}],
    personContactName: [{required: true, message: '请输入项目联系人', trigger: 'blur'}],
    contactPhone: [{required: true, message: '请输入项目联系人电话', trigger: 'blur'}],
    recommendationUnitName: [{required: true, message: '请输入推荐单位', trigger: 'change'}],
    unveilTheLeader: [{required: true, message: '请选择是否揭榜挂帅', trigger: 'change'}]
  }
});
const {form, rules} = toRefs(data);

function onSubmit(type) {
  projectInfoRef.value.validate(valid => {
    if (valid) {
      addProject(form.value).then(response => {
        projectStore.setProjectData(response.data)
        if (type === 0) {
          proxy.$modal.msgSuccess("保存成功");
        } else {
          emit('activeNext', 'tab2')
        }
      });
    }
  })
}

function onCancel() {
  const obj = { path: "/project/infoManagement" };
  proxy.$tab.closeOpenPage(obj);
}

function getProjectCode() {
  getCode().then(res => {
    form.value.projectCode = res.msg;
  })
}

function init() {
  if (route.query.type === 'add') {
    getProjectCode()
    form.value.applicationUnitId = userStore.getUserInfo.myDept.deptId
    form.value.applicationUnitName = userStore.getUserInfo.myDept.deptName
    form.value.recommendationUnitId = userStore.getUserInfo.recDept.deptId
    form.value.recommendationUnitName = userStore.getUserInfo.recDept.deptName
  } else {
    getProject(route.query.id).then(res => {
      form.value = res.data;
      projectStore.setProjectData(res.data)
    })
  }
}

init()

defineExpose({
  projectInfoRef
})

</script>

<style scoped lang="scss">

</style>
